<template>
  <div class="app-container  region-page"  style="width: 100px;padding: 0px;margin: 0px;">
    <div  style="padding: 0px;margin: 0px;">
        <el-input
          v-model="searchname"
          placeholder="请输入地名"
          clearable
          size="small"
          prefix-icon="el-icon-search"
          style="margin: 2px"        />
      <el-tree
        class="filter-tree"
        :data="regionList"
        :props="defaultProps"
        node-key="code"
        :default-expand-all=false
        highlight-current
        :filter-node-method="filterNode"
        @node-contextmenu="handleClick"
        ref="tree"    >
        <span slot-scope="{ node }">
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </div>

  </div>
</template>

<script>
import { listRegion, getRegion, delRegion, addRegion, updateRegion, exportRegion } from "@/api/business/region";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Region",
  components: {
    Treeselect
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      // sys_region表格数据
      regionList: [],
      searchname: undefined,
      regionvalue:'',
      defaultProps: {
        children: "children",
        label: "name",
        level:'level',
        fullname:'fullname',
      },
      // 查询参数
      queryParams: {
        code: null,
        name: null,
        level: null,
        parentCode: null
      },
      // 表单参数
      // 表单校验
      rules: {
        code: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        level: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
      }
    };
  },
  props: {
    areacode: {
      type: String,
      default: null,
    }
  },watch: {
    // 根据名称筛选部门树
    searchname(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.queryParams.level=1;
    this.getList();
    this.expandToRegion(this.areacode);
  },
  methods: {
    /** 查询sys_region列表 */
    getList() {
      this.loading = true;
      listRegion(this.queryParams).then(response => {
        this.regionList = response.data;
        this.loading = false;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleClick(event,data,node,component) {
      this.$emit('nodeDbclick', data);

    },  expandToRegion(regioncode) {
      // 递归查找路径
      const findPath = (nodes, code, path = []) => {
        for (let node of nodes) {
          if (node.code === code) {
            return [...path, node.code];
          }
          if (node.children && node.children.length) {
            const res = findPath(node.children, code, [...path, node.code]);
            if (res) return res;
          }
        }
        return null;
      };
      const path = findPath(this.regionList, regioncode);
      if (!path) return;
      // 展开所有父节点
      path.slice(0, -1).forEach(code => {
        if (this.$refs.tree && this.$refs.tree.store && this.$refs.tree.store.nodesMap[code]) {
          this.$refs.tree.store.nodesMap[code].expanded = true;
        }
      });
      // 选中目标节点
      if (this.$refs.tree) {
        this.$refs.tree.setCurrentKey(regioncode);
      }
    },

    /** 重置按钮操作 */
    reset() {
       this.queryParams={
        code: null,
          name: null,
          level: null,
          parentCode: null
      };
      this.queryParams.pageNum = 1;
    },
      /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除sys_region编号为"' + row.id + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delRegion(row.id);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
    }
  }
};
</script>

<style scoped>
.region-page {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.category-panel {
  flex: 1;
  /* 可根据需要添加padding等样式 */
}
.side-form {
  width: 800px;
  margin-left: 24px;
  background: #fff;
  padding: 2px;
  box-shadow: 0 2px 2px #f0f1f2;
}
</style>
